<template>
  <div class="map" ref="map"></div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"

export default {
  name: 'MapboxMap',
  data () {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      mapboxgl.accessToken = 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A';
      this.map = new mapboxgl.Map({
        container: this.$refs.map, // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [104.1324, 36.92669], // starting position [lng, lat]
        zoom: 3 // starting zoom
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
</style>
